<template>
  <div class="chart_box">
    <div>
      <div class="data_cak">
        <div class="data_item">
          <el-card class="box-card">
            <div class="clearfix">
              <span class="cak_title">商品数量</span>
              <div class="cak_pic">{{avgForm.moneyNumber==''?'--':avgForm.moneyNumber}}</div>
            </div>
          </el-card>
        </div>
        <div class="data_item">
          <el-card class="box-card">
            <div class="clearfix">
              <span class="cak_title">总价格</span>
              <div class="cak_pic">￥{{avgForm.totalMoney==''?'--':avgForm.totalMoney}}</div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div>
      <div style class="my_bg_pic">
        <el-date-picker
          size="small"
          @change="handYear"
          v-model="valueForm.valueYear"
          type="year"
          value-format="yyyy"
          placeholder="选择年"
          :clearable="false"
        ></el-date-picker>
        <el-date-picker
          :clearable="false"
          size="small"
          @change="handMonth"
          v-model="valueForm.valueMonth"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月"
        ></el-date-picker>
        <el-date-picker
          :clearable="false"
          @change="handData"
          size="small"
          v-model="valueForm.valueDate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <!-- <el-button type="warning" size="small" icon="el-icon-search" @click="handSearch()">搜索</el-button> -->
        <el-button type="warning" size="small" icon="el-icon-delete" @click="handReset()">重置</el-button>
      </div>
      <div class="chart-container">
        <chart ref="myEhart" height="500px" width="100%" />
      </div>
    </div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/LineMarker'
import Chart1 from '@/components/Charts/LineMarker1'

export default {
  name: 'LineChart',
  components: { Chart, Chart1 },
  data() {
    return {
      valueForm: {
        valueYear: '',
        valueMonth: '',
        valueDate: ''
      },

      searchForm: {
        type: '2',
        times: new Date(new Date()).Format('yy-MM')
      },
      avgForm: {}
    }
  },
  mounted() {
    this.getAvgOrder()
  },
  methods: {
    handReset() {
      this.searchForm = {
        type: '2',
        times: new Date(new Date()).Format('yy-MM')
      }
      this.$refs.myEhart.searchForm = {
        type: '2',
        times: new Date(new Date()).Format('yy-MM')
      }
      for (let key in this.valueForm) {
        this.valueForm[key] = ''
      }
      this.$refs.myEhart.initChart()
      this.getAvgOrder()
    },
    async getAvgOrder() {
      this.avgForm = (await this.$api.avgOrder(this.searchForm)).data.data
    },
    handYear(val) {
      this.valueForm.valueMonth = ''
      this.valueForm.valueDate = ''
      this.searchForm.type = 3
      this.searchForm.times = val
      this.$refs.myEhart.searchForm.type = 3
      this.$refs.myEhart.searchForm.times = val
      this.$refs.myEhart.initChart()
      this.getAvgOrder()
    },
    handMonth(val) {
      this.valueForm.valueYear = ''
      this.valueForm.valueDate = ''
      this.getAvgOrder()
      this.searchForm.type = 2
      this.searchForm.times = val
      this.$refs.myEhart.searchForm.type = 2
      this.$refs.myEhart.searchForm.times = val
      this.$refs.myEhart.initChart()
    },
    handData(val) {
      this.valueForm.valueYear = ''
      this.valueForm.valueMonth = ''
      this.$refs.myEhart.searchForm.type = 1
      this.searchForm.type = 1
      this.searchForm.times = val
      this.$refs.myEhart.searchForm.times = val
      this.$refs.myEhart.initChart()
      this.getAvgOrder()
    }
  }
}
</script>

<style scoped lang="scss">
.chart_box {
  padding: 20px;
  background-color: #fff;
}
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.my_bg_pic {
  margin: 20px 0;
  margin-top: 0;
}
.my_bg_pic /deep/ .el-input__inner {
  background-color: #38ad93;
  color: #fff;
}
.my_bg_pic /deep/ .el-input__inner::-webkit-input-placeholder {
  color: #fff;
}
.my_bg_pic /deep/ .el-input__icon.el-icon-date {
  color: #fff;
}
.data_cak {
  margin: 40px 0;
  display: flex;
  align-items: center;
  .data_item {
    width: 256px;
    margin-right: 52px;
  }
  .cak_fas {
    color: #606266;
    font-size: 14px;
  }
  .cak_title {
    color: #909399;
    font-size: 14px;
  }
  .cak_pic {
    color: #000000;
    font-size: 30px;
    margin-top: 8px;
  }
}
</style>

